<template>
  <a-modal
    :title="title"
    :width="560"
    :visible="visible"
    :isLoading="isLoading"
    :maskClosable="false"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="isLoading">
      <a-form :form="formData">
        <a-form-model-item label="物流公司" prop="expressId">
          <a-select v-model="formData.expressId" placeholder="请选择物流公司">
            <a-select-option
              v-for="(item, index) in expressList"
              :key="index"
              :value="item.express_id"
            >{{ item.express_name }}</a-select-option>
          </a-select>
          <div class="form-item-help">
            <router-link
              target="_blank"
              :to="{ path: '/setting/delivery/express/index' }"
            >物流公司管理</router-link>
          </div>
        </a-form-model-item>
        <a-form-model-item label="物流单号" prop="expressNo" >
          <a-input v-model="formData.expressNo" />
        </a-form-model-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import * as Api from '@/api/order/event'
import * as ExpressApi from '@/api/setting/express'

const rules = {
  expressId: [
    { required: true, message: '请选择物流公司', trigger: 'blur' }
  ],
  expressNo: [
    { required: true, message: '请填写物流单号', trigger: 'blur' }
  ],
}
export default {
  data () {
    return {
      // 对话框标题
      title: '修改发货信息',
      // 标签布局属性
      labelCol: { span: 7 },
      // 输入框布局属性
      wrapperCol: { span: 13 },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      isLoading: false,
	  // 物流公司列表
	  expressList: [],
      // form记录
      formData: {
        // 发货方式 (10手动录入 20无需物流)
        deliveryMethod: 10,
        // 打包方式 (10整单打包 20拆分包裹)
        packMethod: 10,
        // 物流公司ID
        expressId: undefined,
        // 物流单号
        expressNo: ''
      },
      // 当前记录
      record: {}
    }
  },
  created () {
    // 获取物流公司列表
    this.getExpressList()
  },
  methods: {

    /**
     * 显示对话框
     */
    show (record) {
      // 显示窗口
      this.visible = true
      // 当前记录
      this.record = record
	  this.formData.expressId = this.record.delivery[0].express_id
	  this.formData.expressNo = this.record.delivery[0].express_no
    },

    /**
     * 确认按钮
     */
    handleSubmit (e) {
      e.preventDefault()
      this.onFormSubmit()
    },

    /**
     * 关闭对话框事件
     */
    handleCancel () {
      this.visible = false
      // this.formData.resetFields()
    },
	// 获取物流公司列表
	getExpressList () {
	  this.isLoading = true
	  ExpressApi.all()
	    .then(result => this.expressList = result.data.list)
	    .finally(() => this.isLoading = false)
	},
    // 提交到后端api
    onFormSubmit () {
      this.isLoading = true
      Api.delivery({ orderId: this.record.order_id, type: 2, form: this.formData })
        .then(result => {
          // 显示成功
          this.$message.success(result.message, 1.5)
          // 关闭对话框事件
          this.handleCancel()
          // 通知父端组件提交完成了
          this.$emit('handleSubmit', true)
        })
        .finally(() => this.isLoading = false)
    }

  }
}
</script>
